<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移动时的酷炫光标动画</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <script>
        function spark(event) {
            let i = document.createElement("i");
            i.style.left = (event.pageX) + "px";
            i.style.top = (event.pageY) + "px";
            i.style.scale = `${Math.random() * 2 + 1}`;
            i.style.setProperty('--x', getRandomTransitionValue());
            i.style.setProperty('--y', getRandomTransitionValue());

            document.body.appendChild(i);

            setTimeout(() => {
                document.body.removeChild(i);
            }, 2000);
        }


        function getRandomTransitionValue() {
            return `${Math.random() * 400 - 200}px`;
        }

        document.addEventListener('mousemove', spark);
    </script>
</body>
</html>